<template>
  <div class="subPage">
    <nav-bar
      :title="navTitle" 
      position="center" 
      color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
      :rowColor="'white'" 
      :goBack="goBack" 
      :isMsg='false' 
      fontColor='#fff' ></nav-bar>
    <div class="searchBox">
      <img :src="magnifierIcon" />
      <div class="iptBox">
        <input
          placeholder="搜索关键字"
          placeholder-style="color:#AAAAAA;"
          v-model="serchVale"
          maxlength="10"
          class="ipt"
          type="text"
          confirm-type="search"
          @confirm="search"
        />
      </div>
      <span class="cancelBox"  @click="serchVale=''">
        <img class="imgClass" v-if="imgUrl && serchVale" :src="imgUrl + 'dleIcon.png'" />
      </span>
    </div>
    <div class="flexContent">
      <div class="liveTypeBox">
        <ul>
          <li v-for="typeItem in homePageData.type_list" :key="typeItem.vodeo_type"  @click="goDeptType(typeItem.vodeo_type)" >
            <img :src="typeItem.picture" :alt="typeItem.type_name">
            <span>{{typeItem.type_name}}</span>
          </li>
        </ul>
      </div>
      <div class="liveVideoEntry" @click="goLiveRoom" >
        <img :src="videoEntry" alt="进入直播间">
      </div>
      <div class="videoListBox">
        <div class="title">最新</div>
        <ul v-if="homePageData.recently_list.length>0" >
          <li v-for="newlyItem in homePageData.recently_list" :key="newlyItem.id" @click="clickFile(newlyItem)" >
            <div class="videoTopicImg">
              <img :src="newlyItem.picture" :alt="newlyItem.title">
              <span class="tips" :style="{background:newlyItem.file_type.color}">{{newlyItem.file_type.name}}</span>
              <span class="playBtn"  v-if="newlyItem.file_type.color!=='#3CDFF5'" >
                <img src="/static/images/video_play.png" alt="">
              </span>
            </div>
            <div class="desc" >{{newlyItem.title}}</div>
          </li>
        </ul>
        <div v-else class="noVideoImg">
          <img :src="noDataImg"/>
        </div>
      </div>
      <div class="videoListBox">
        <div class="title">推荐</div>
        <ul v-if="homePageData.recommend_list.length>0" >
          <li v-for="recommendItem in homePageData.recommend_list" :key="recommendItem.video_type" @click="clickFile(recommendItem)" >
            <div class="videoTopicImg">
              <img :src="recommendItem.picture" :alt="recommendItem.title">
              <span class="tips" :style="{background:recommendItem.file_type.color}">{{recommendItem.file_type.name}}</span>
              <span class="playBtn"  v-if="recommendItem.file_type.color!=='#3CDFF5'" >
                <img src="/static/images/video_play.png" alt="">
              </span>
            </div>
            <div class="desc">{{recommendItem.title}}</div>
          </li>
        </ul>
        <div v-else class="noVideoImg">
          <img :src="noDataImg"/>
        </div>
      </div>
      <div class="footer"></div>
      <div v-if="false" class="noDataImg">
        <img :src="noDataImg"/>
      </div>
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
import api from "@/api/api";
import storage from "@/utils/storage";
import navBar from '@/components/navBar'
import { mapState } from 'vuex'
const { $Toast, $Message } = require("../../../../../static/iview/base/index");
export default {
  components: {
    navBar
  },
  computed: {
    ...mapState([
      'ifIphonex'
    ])
  },
  data() {
    return {
      userInfo: {},
      imgUrl: "",
      noDataImg: '',
      navTitle: "健康教育",
      homePageData: {
        recently_list: [],
        recommend_list: [],
        type_list: []
      },
      recordList: [],
      triggered: false,
      enabled: true,
      magnifierIcon: "",
      videoEntry: "",
      serchVale: "",
    };
  },
  onLoad(options) {
    this.imgUrl = api.imgUrl;
    this.userInfo = this.$storage.getAccountInfo();
    this.noDataImg = this.imgUrl + 'noData.png';
    this.magnifierIcon = this.imgUrl + "magnifier-icon.png";
    this.videoEntry = this.imgUrl + "video_entry.png"
  },
  onShow() {
    this.pageData()
  },
  onUnload() {
  },
  methods: {
    // 健康直播 首页信息
    pageData() {
      this.$api.healthHomepage({}).then(res=>{
        this.homePageData = res.data
        this.homePageData.recently_list.forEach((ele,i)=>{
          this.homePageData.recently_list[i].file_type = this.notifyFileType(ele.video)
        })
        this.homePageData.recommend_list.forEach((ele,i)=>{
          this.homePageData.recommend_list[i].file_type = this.notifyFileType(ele.video)
        })
      })
    },
    // 判断文件类型
    notifyFileType(url) {
      let arr = url.split('.')
      if(arr[arr.length-1] == "mp4" || arr[arr.length-1] == "avi" || arr[arr.length-1] == "mov") {
        return {name:'视频', color: '#3CE48F'}
      } else if (arr[arr.length-1] == "mp3") {
        return {name:'音频', color: '#FF7B7B'}
      } else {
        return {name:'文件', color: '#3CDFF5'}
      }
    },
    // 搜索框模糊搜素视频
    search() {
      this.$router.push(`/pages/subPage/liveVideoArea/liveVideo/main?key_words=${this.serchVale}`)
      setTimeout(() => {
        this.serchVale = ''
      }, 500);
    },
    // 进入直播列表
    goLiveRoom() {
      this.$router.push("/pages/subPage/liveVideoArea/liveVideo/main")
    },
    // 跳转选择科室
    goDeptType(type) {
      this.$router.push(`/pages/subPage/liveVideoArea/videoSearchResult/main?video_type=${type}`)
    },
    // 点击最新、推荐内容
    clickFile(item) {
      if(item.file_type.name == '文件') {
        this.viewFile(item.video)
      } else {
        this.$router.push(`/pages/subPage/liveVideoArea/videoPlayRoom/main?type=${item.file_type.name}&src=${item.video}`)
      }
    },
    // 打开文件
    viewFile(url) {
      wx.showLoading({
        title: "加载中...",
        mask: true
      });
      let arr = url.split('.');
      if(arr[arr.length-1]=='jpg'||arr[arr.length-1]=='png'||arr[arr.length-1]=='gif') {
        mpvue.previewImage({
          current: url, // 当前显示图片的http链接
          urls: [url] // 需要预览的图片http链接列表
        })
        wx.hideLoading()
        return
      }
      wx.downloadFile({
        url: url,
        success: function (res) {
          const filePath = res.tempFilePath
          wx.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log('打开文档成功')
              wx.hideLoading()
            }
          })
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped lang="less">
.subPage {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
.flexContent {
  display: flex;
  flex: 1;
  height: 100%;
  position: relative;
  flex-direction: column;
  overflow-y: scroll;
  padding: 35rpx 20rpx 5rpx;
  .blueColor {
    color: #4A71E8;
  }
  .noVideoImg {
    height: 415rpx;
    display: flex;
    justify-content: center;
    img {
      height: 415rpx;
      width: 510rpx;
    }
  }
  .ipxBottom {
    height: 30rpx;
  }
}
.searchBox {
  position: relative;
  height: 70rpx;
  color: #aaaaaa;
  font-size: 28rpx;
  margin: 30rpx 4rpx 0rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  .iptBox {
    height: 100%;
    background-color: #f6f6f6;
    border-radius: 35rpx;
    .ipt {
      height: 100%;
      width: 72%;
      background: rgba(246, 246, 246, 1);
      border-radius: 35rpx;
      padding-left: 76rpx;
      margin-right: 24rpx;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .btnCancel {
    display: inline-block;
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(74, 113, 232, 1);
    vertical-align: middle;
  }
  img {
    position: absolute;
    width: 31rpx;
    height: 32rpx;
    left: 43rpx;
    top: 20rpx;
  }
  .cancelBox{
    width: 75rpx;
    height: 100%;
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    z-index: 9999;
    .imgClass{
      width: 37rpx;
      height: 37rpx;
      position: absolute;
      left: 0rpx;
      top: 18rpx;
    }
  }
}
.liveTypeBox {
  min-height: 434rpx;
  width: 100%;
  ul {
    justify-content: space-around;
    flex-wrap: wrap;
    display: flex;
    li {
      width: 33%;
      display: flex;
      flex-direction: column;
      align-content: center;
      align-items: center;
      justify-content: center;
      margin-bottom: 38rpx;
      img {
        height: 134rpx;
        width: 134rpx;
        margin-bottom: 24rpx;
      }
      span {
        display: block;
        color: #666666;
        text-align: center;
      }
    }
  }
}
.liveVideoEntry {
  margin: 35rpx 0 0;
  height: 208rpx;
  img {
    width: 100%;
    height: 208rpx;
  }
}
.videoListBox {
  margin-top: 34rpx;
  // min-height: 286rpx;
  padding: 0 7rpx;
  .title {
    font-weight: 600;
    font-size: 36rpx;
    color: #27354B;
  }
  ul{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    li {
      margin-top: 38rpx;
      height: 204rpx;
      width: 214rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .videoTopicImg {
        position: relative;
        margin-bottom: 10rpx;
        border-radius: 6rpx;
        overflow: hidden;
        img {
          width: 213rpx;
          height: 148rpx;
          border-radius: 6rpx;
        }
        .tips {
          height: 41rpx;
          width: 74rpx;
          line-height: 41rpx;
          text-align: center;
          left: 0;
          top: 0;
          position: absolute;
          color: #fff;
          font-size: 22rpx;
          // background-color:#3CE48F;
          border-radius: 0 0 22rpx 0;
        }
        .playBtn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          img {
            height: 65rpx;
            width: 65rpx;
          }
        }
      }
      .desc {
        font-size: 30rpx;
        height: 35rpx;
        line-height: 35rpx;
        display: block;
        text-align: center;
        color: #666666;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.videoPlayBox {
  flex: 1;
}
#myVideo {
  height: 100%;
  width: 100%;
}
.footer {
  display: block;
  margin: 40rpx 0;
  width: 100%;
}
</style>
